import React, { useState,useEffect } from 'react'
import logo from './logo.svg'
import './App.css'
import NameEditComponent from './nameEdit'
import  HelloComponent  from './hello'
function App() {
  const [name, setName] = useState("defaultUsername")
  const [editingName,setEditingName] = useState("defaultUsername")
  // const setUsernameState = 
  //   (e:React.ChangeEvent<HTMLInputElement>) => {
  //   setName(e.target.value)
  // }
  const setUsernameState = () => {
    setName(editingName);
  }
  const loadUsername = () => {
    setTimeout(() => {
      setName("name from async call");
      setEditingName("name from async call")
    },2500)
  }
  useEffect(() => {
    loadUsername();
  },[])
  return (
    <div className="App">
      <HelloComponent userName={name} age = {18}/>
      {/* <NameEditComponent userName={name} onNameUpdated={setUsernameState}/> */}
      <NameEditComponent 
        onEditingNameUpdate={setEditingName}
        initialUserName={name}
        editingName={editingName}
        onNameUpdate={setUsernameState}
        disabled={editingName=='' || editingName == name}
        />
    </div>
  )
}

export default App
